<template>
  <card ref="Card">
    <div slot="header">
      <el-input placeholder="订单号" v-model="search.number" style="width: 160px;margin-bottom: 5px" clearable @keyup.enter.native="getData"/>
      <search-select-lower v-model="userId" @get="getSite"/>
      <date-time-picker class="ml-5" :start.sync="search.beginTime" :end.sync="search.endTime"/>
      <el-button type="success" @click="getData" class="ml-10">搜索</el-button>
      <el-button type="warning" @click="clearSearch">清空</el-button>
    </div>
    <span class="customs-charges">报关费金额总计：{{total}}</span>
    <el-table :data="formData">
      <el-table-column prop="number" label="订单号" width="165"></el-table-column>
      <el-table-column prop="senderName" label="寄件人姓名"></el-table-column>
      <el-table-column prop="senderPhone" label="寄件人联系电话"></el-table-column>
      <el-table-column prop="receiverName" label="收件人姓名"></el-table-column>
      <el-table-column prop="receiverPhone" label="收件人联系电话"></el-table-column>
      <el-table-column prop="customsFee" label="金额"></el-table-column>
      <el-table-column label="创建时间" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.updateTime | formatDateTime}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="80">
        <template slot-scope="scope">
          <el-button icon="el-icon-view" @click.stop="see(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
    <pagination ref="Pagination" @update="getData"/>
    <order-detail ref="OrderDetail"/>
  </card>
</template>

<script>
  import SearchSelectLower from '@/views/components/SearchSelectLower'
  import DateTimePicker from '@/components/DateTimePicker'
  import OrderDetail from '@/views/components/OrderDetail'
  import {pageCustomsFeeApi} from '@/api/order'
  import {resetForm} from "@/utils/common";

  export default {
    name: 'CustomsCharges',
    components: {DateTimePicker, OrderDetail, SearchSelectLower},
    data() {
      return {
        formData: [],
        total: null,
        userId: null,
        /* 搜索 */
        search: {
          number: '',
          username: '',
          beginTime: '',
          endTime: ''
        }
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      // 获取网点
      getSite(obj) {
        if (obj) {
          this.search.username = obj.username
        } else {
          this.search.username = ''
        }
        this.getData()
      },
      // 查看详情
      see(obj) {
        let _this = this.$refs.OrderDetail
        _this.visible = true
        _this.obj = obj
      },
      // 获取
      getData() {
        let pagination = this.$refs.Pagination;
        let param = {
          current: pagination.current,
          size: pagination.size,
          number: this.search.number,
          username: this.search.username,
          beginTime: this.search.beginTime,
          endTime: this.search.endTime
        };
        if (!param.username) delete param.username;
        if (!param.beginTime) delete param.beginTime;
        if (!param.endTime) delete param.endTime;
        this.$refs.Card.start();
        pageCustomsFeeApi(param).then(result => {
          this.total = result.resultParam.customsFee
          let response = result.resultParam.expressOrderPage;
          this.formData = response.records;
          pagination.total = response.total;
          this.$refs.Card.stop();
        })
      },
      // 清空搜索
      clearSearch() {
        this.userId = null;
        resetForm(this, 'search', null).then(() => {
          this.getData();
        })
      }
    }
  }
</script>

<style scoped>
  .customs-charges {
    font-size: 18px;
    font-weight: bold;
  }
</style>
